<template>
  <div>
    <h1>房号列表</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>序号</td>
          <td>房号</td>
          <td>房型名称</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
        <tr v-for="a in info.list" :key="a.hid">
          <td>{{ a.hid }}</td>
          <td>{{ a.hname }}</td>
          <td>{{ a.tname }}</td>
          <td>
            <span v-if="a.htype == 1">上架</span>
            <span v-if="a.htype == 0">下架</span>
          </td>
          <td>操作</td>
        </tr>
      </tbody>
    </table>
    <div>
      <span>
        共<b>{{ info.count }}</b
        >条
      </span>
      <span>
        每页<b>{{ data.pagesize }}</b
        >条
      </span>
      <span>
        共<b>{{ data.pageindex }}/{{ info.totalpage }}</b
        >条
      </span>
      <input type="button" value="首页" @click="page(1)" />
      <input type="button" value="上一页" @click="page(data.pageindex - 1)" />
      <input type="button" value="下一页" @click="page(data.pageindex + 1)" />
      <input type="button" value="尾页" @click="page(info.totalpage)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import axios from "axios";
let info: any = reactive({
  count: 0,
  totalpage: 2,
  list: [],
});
let data: any = reactive({
  pageindex: 1,
  pagesize: 2,
});
onMounted(() => {
  list();
});
const page = (num: any) => {
  if (num < 1) {
    data.pageindex = 1;
    return;
  }
  if (num > data.totalpage) {
    data.pageindex = info.totalpage;
    return;
  }
  data.pageindex = num;
  list();
};
const list = () => {
  axios({
    url: "/api/House/Getlist",
    method: "get",
    params:data
  }).then((res) => {
    console.log(res);
    Object.assign(info, res.data);
  });
};
</script>

<style scoped></style>
